<template>
  <div class="acceptancelist-container">
    <div class="title">商品中心</div>
    <div class="content">
      <div class="option">
        <van-tabs @click="onClick">
          <van-tab
            v-for="item in CategoryNameList"
            :title="item.category_name"
            :name="item.id"
            :key="item.id"
          ></van-tab>
        </van-tabs>
      </div>
      <div class="search">
        <van-search
          v-model="name"
          show-action
          clearable
          placeholder="请输入商品名称"
        >
          <template #action>
            <div @click="search">搜索</div>
          </template>
        </van-search>
      </div>
      <div class="list">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getData"
        >
          <Card v-for="goods in goodslist" :key="goods.id" :data="goods" />
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import { getCategoryNameList, query } from "@/api/goodslist";
import Utils, { transformTimestamp } from "@/tools/utils";
import Card from "@/components/Card.vue";
export default {
  name: "Goodslist",
  data() {
    return {
      loading: false,
      finished: false,
      curPage: 1,
      pageSize: 10,
      total: 0,
      CategoryNameList: [],
      goodslist: [],
      name: "",
      active: ""
    };
  },
  components: {
    Card
  },
  watch: {
    active: {
      handler(newVal, oldVal) {
        this.changeOption(newVal);
      },
      deep: true,
      immediate: true
    }
  },
  beforeCreate() {},
  created() {
    console.log("this.active", this.active);
    this.getCategoryNameList();
  },
  mounted() {},
  methods: {
    getCategoryNameList() {
      getCategoryNameList().then(res => {
        this.CategoryNameList = [
          { category_name: "全部", id: "" },
          ...res.data
        ];
      });
    },
    onClick(name, title) {
      this.active = name;
    },
    changeOption(val) {
      this.goodslist = [];
      this.curPage = 1;
      this.pageSize = 10;
      this.finished = false;

      this.loading = false;
      this.getData();
    },
    search() {
      this.goodslist = [];
      this.curPage = 1;
      this.pageSize = 10;
      this.loading = false;

      this.finished = false;
      this.getData();
    },
    getData() {
      this.loading = true;
      query({
        currPage: this.curPage,
        pageSize: this.pageSize,
        category_id: this.active,
        name: this.name,
        state: 2
      })
        .then(res => {
          this.curPage = this.curPage + 1;
          this.goodslist = [
            ...this.goodslist,
            ...res.data.map(item => {
              return {
                ...item,
                release_time: transformTimestamp(item.release_time)
              };
            })
          ];
          this.total = res.count;
          if (this.goodslist.length >= res.count) {
            this.finished = true;
          }
          this.flot = false;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
